{% extends 'base.html' %}

{% block title %}Delete Department: {{ object.name }}{% endblock %}

{% block content %}
<div class="container mt-5 pt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'departments:department_list' %}">Departments</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'departments:department_detail' object.pk %}">{{ object.name|truncatechars:20 }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Delete</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0">
                <i class="fas fa-exclamation-triangle text-danger me-2"></i>Delete Department
            </h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card border-danger shadow-sm mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0"><i class="fas fa-exclamation-circle me-2"></i>Warning: This action cannot be undone</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger">
                        <h5 class="alert-heading d-flex align-items-center">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            You are about to delete the department: <strong class="ms-1">{{ object.name }}</strong>
                        </h5>
                        <p class="mb-0">This action is permanent and cannot be undone. Please review the information below before proceeding.</p>
                    </div>

                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">Department Details</h5>
                        </div>
                        <div class="card-body">
                            <dl class="row mb-0">
                                <dt class="col-sm-3">Name</dt>
                                <dd class="col-sm-9">{{ object.name }}</dd>
                                
                                <dt class="col-sm-3">Description</dt>
                                <dd class="col-sm-9">{{ object.description|default:"-"|linebreaksbr }}</dd>
                                
                                <dt class="col-sm-3">Parent Department</dt>
                                <dd class="col-sm-9">
                                    {% if object.parent %}
                                        <a href="{% url 'departments:department_detail' object.parent.pk %}">
                                            {{ object.parent.name }}
                                        </a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </dd>
                                
                                <dt class="col-sm-3">Manager</dt>
                                <dd class="col-sm-9">
                                    {% if object.manager %}
                                        <a href="{% url 'users:user_detail' object.manager.pk %}">
                                            {{ object.manager.get_full_name }}
                                        </a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </dd>
                                
                                <dt class="col-sm-3">Created</dt>
                                <dd class="col-sm-9">{{ object.created_at|date:"F j, Y" }}</dd>
                                
                                <dt class="col-sm-3">Last Updated</dt>
                                <dd class="col-sm-9">{{ object.updated_at|date:"F j, Y \a\t P" }}</dd>
                            </dl>
                        </div>
                    </div>

                    {% if object.children.exists or object.user_set.exists %}
                    <div class="card border-warning mb-4">
                        <div class="card-header bg-warning bg-opacity-10">
                            <h5 class="mb-0"><i class="fas fa-exclamation-triangle text-warning me-2"></i>Impact Analysis</h5>
                        </div>
                        <div class="card-body">
                            {% if object.children.exists %}
                            <div class="mb-3">
                                <h6 class="text-danger">
                                    <i class="fas fa-sitemap me-2"></i>
                                    {{ object.children.count }} Sub-Department{{ object.children.count|pluralize }} will be deleted:
                                </h6>
                                <div class="ms-4 mt-2">
                                    <ul class="list-unstyled">
                                        {% for child in object.children.all|slice:":5" %}
                                            <li>
                                                <i class="fas fa-folder-open text-muted me-2"></i>
                                                {{ child.name }}
                                                {% if child.user_set.exists %}
                                                    <span class="badge bg-secondary ms-2">
                                                        {{ child.user_set.count }} member{{ child.user_set.count|pluralize }}
                                                    </span>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                        {% if object.children.count > 5 %}
                                            <li class="text-muted">... and {{ object.children.count|add:"-5" }} more</li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                            {% endif %}
                            
                            {% if object.user_set.exists %}
                            <div>
                                <h6 class="text-danger">
                                    <i class="fas fa-users me-2"></i>
                                    {{ object.user_set.count }} User{{ object.user_set.count|pluralize }} will be affected:
                                </h6>
                                <div class="ms-4 mt-2">
                                    <ul class="list-unstyled">
                                        {% for user in object.user_set.all|slice:":5" %}
                                            <li>
                                                <i class="fas fa-user text-muted me-2"></i>
                                                {{ user.get_full_name }}
                                                <span class="text-muted">({{ user.email }})</span>
                                                {% if user == object.manager %}
                                                    <span class="badge bg-danger ms-2">Manager</span>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                        {% if object.user_set.count > 5 %}
                                            <li class="text-muted">... and {{ object.user_set.count|add:"-5" }} more</li>
                                        {% endif %}
                                    </ul>
                                    
                                    <div class="alert alert-warning mt-3 mb-0">
                                        <i class="fas fa-info-circle me-2"></i>
                                        These users will be moved to the default department. Please reassign them to appropriate departments after deletion.
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                    
                    <form method="post" class="mt-4">
                        {% csrf_token %}
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <a href="{% url 'departments:department_detail' object.pk %}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-1"></i> Cancel
                                </a>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-danger">
                                    <i class="fas fa-trash me-1"></i> Confirm Delete
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card border-danger shadow-sm mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0"><i class="fas fa-exclamation-triangle me-2"></i>Before You Delete</h5>
                </div>
                <div class="card-body">
                    <h6>Consider These Alternatives</h6>
                    <ul class="small text-muted">
                        <li class="mb-2">
                            <strong>Archive instead of delete</strong> - Consider marking the department as inactive if you might need it later.
                        </li>
                        <li class="mb-2">
                            <strong>Reorganize</strong> - Move sub-departments and users to a different department first.
                        </li>
                        <li class="mb-2">
                            <strong>Rename</strong> - If the department's purpose has changed, consider renaming it instead.
                        </li>
                    </ul>
                    
                    <h6 class="mt-4">What Happens Next?</h6>
                    <ul class="small text-muted">
                        <li class="mb-2">The department will be permanently removed from the system.</li>
                        <li class="mb-2">All sub-departments will be deleted.</li>
                        <li class="mb-2">Users will be moved to the default department.</li>
                        <li>This action will be recorded in the system logs.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add confirmation before form submission
        const deleteForm = document.querySelector('form[method="post"]');
        if (deleteForm) {
            deleteForm.addEventListener('submit', function(e) {
                if (!confirm('Are you absolutely sure you want to delete this department and all its sub-departments? This action cannot be undone.')) {
                    e.preventDefault();
                }
            });
        }
    });
</script>
{% endblock %}
        </table>
    </div>
</div>

<form method="post">
    {% csrf_token %}
    <div class="d-flex justify-content-between">
        <a href="{% url 'users:department_detail' object.pk %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Cancel
        </a>
        <button type="submit" class="btn btn-danger">
            <i class="fas fa-trash"></i> Confirm Delete
        </button>
    </div>
</form>
{% endblock %}